<template>
   <div style="padding: 30px;">{{time}}</div>
   <div><button @click="timeFn">开始</button></div>
   <div>
     <Suspense>
       <!-- 请求完成之后显示 -->
       <template #default>
          <asyncShow />
       </template>
 
       <!-- 请求完成之前显示 -->
       <template #fallback>
         <div>loading....</div>
       </template>
     </Suspense>
   </div>
</template>

<script>
import { ref, refs, onMounted, onErrorCaptured} from 'vue'
import {time, timeFn} from '@/hooks/time'
import asyncShow from '@/components/asyncShow.vue'
export default {
  components: {
    asyncShow
  },
  setup(props) {
    onMounted(() => {
       console.log('props', props)
    })
    onErrorCaptured((error) => {
       console.log(error, 'onErrorCaptured')
       return true
    })
    return {
      time, 
      timeFn
    }
  }
}
</script>

<style>

</style>